<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :xl="6" :lg="6" :md="6" :sm="24" >
            <a-form-model-item label="收支属性">
              <j-dict-select-tag
                v-model="queryParam.cashType"
                placeholder="请选择收支属性"
                dict-code="xy_park_cash_type"
              >
              </j-dict-select-tag>
            </a-form-model-item>
          </a-col>
          <a-col :xl="6" :lg="6" :md="6" :sm="24" >
            <a-form-model-item label="业主信息">
              <j-popup
                v-model="queryParam.ownerCode"
                org-fields="owner_code"
                dest-fields="ownerCode"
                field="ownerCode"
                code="v_xy_park_owner"
              />
            </a-form-model-item>
          </a-col>
          <a-col :xl="6" :lg="6" :md="6" :sm="24" >
            <a-form-model-item label="收支账户">
              <j-popup
                v-model="queryParam.customerAccount"
                org-fields="park_number"
                dest-fields="customerAccount"
                field="customerAccount"
                code="v_xy_park_account"
              />
            </a-form-model-item>
          </a-col>
          <template v-if="toggleSearchStatus">
            <a-col :xl="6" :lg="6" :md="6" :sm="24">
              <a-form-item label="收支方式">
                <j-dict-select-tag v-model="queryParam.cashMethod"  placeholder="请选择收支方式" dict-code="xy_park_cash_method"></j-dict-select-tag>
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="6" :md="6" :sm="24">
              <a-form-item label="费项名称">
                <j-popup
                  v-model="queryParam.costType"
                  org-fields="cost_type,cost_name,tax_rate"
                  dest-fields="costType,costName,taxRate"
                  field="costType"
                  code="v_xy_park_cost_type"
                />
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="6" :md="6" :sm="24">
              <a-form-item label="缴款日期" style="width:100%;">
                <j-date placeholder="开始日期" v-model="queryParam['paymentDate_begin']" style="width:calc(50% - 15px);"></j-date>
                <span class="group-query-strig">~</span>
                <j-date placeholder="结束日期" v-model="queryParam['paymentDate_end']" style="width:calc(50% - 15px);"></j-date>
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="6" :md="6" :sm="24">
              <a-form-item label="收支编码" style="width:100%;">
                <a-input placeholder="收支编码" v-model="queryParam['cashCode']"></a-input>
              </a-form-item>
            </a-col>
          </template>
          <a-col :xl="6" :lg="6" :md="6" :sm="24">
            <span class="table-page-search-submitButtons">
              <a-button  type="primary" icon="search" @click="searchQuery">查询</a-button>
              <a-button type="primary" icon="reload" style="margin-left: 8px" @click="searchReset">重置</a-button>
              <a @click="handleToggleSearch" style="margin-left: 8px">
                {{ toggleSearchStatus ? '收起' : '展开' }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
              </a>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <!-- table区域-begin -->
      <vxe-grid
        id="AuditList"
        keep-source
        ref="vxeTable"
        :height="null"
        v-bind="options"
        :columns="columns"
        :data="dataSource"
        :sort-config="{trigger:'cell',remote:true}"
        :edit-config="{trigger: 'click', mode: 'row',showStatus: true}"
        @checkbox-change="onSelectChange"
        @checkbox-all="onSelectChange"
        @cell-dblclick="handleCellHblclick"
        @sort-change="onSortChange"
        @toolbar-button-click="toolbarButtonClickEvent"
      >
      <template v-slot:toolbar_buttons>
        <div class="table-operator">
          <!-- <a-button @click="handleAdd(1)" type="primary" icon="plus">新增</a-button> -->
          <a-dropdown>
            <a-menu slot="overlay">
              <a-menu-item key="1" @click="handleAdd('1')" icon="plus">新增收入</a-menu-item>
              <a-menu-item key="2" @click="handleAdd('2')" icon="plus">新增支出</a-menu-item>
              <a-menu-item key="2" @click="handleAdd('3')" icon="plus">新增减免</a-menu-item>
            </a-menu>
            <a-button type="primary" icon="plus" >新增</a-button>
          </a-dropdown>
        </div>
      </template>
      <template v-slot:toolbar_tools>
        <vxe-button style="margin-right:12px;" @click="handleExportXls('收支流水')" icon="vxe-icon--download" circle></vxe-button>
        <!-- <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
          <vxe-button style="margin-right:12px;" icon="vxe-icon--upload" circle />
        </a-upload> -->
      </template>
      <template #action="{ row }">
        <template>
          <a v-if="row.checkAmount === 0" @click="handleEdit(row)">编辑</a>
          <a-divider type="vertical" />
          <a-dropdown>
            <a class="ant-dropdown-link">更多<a-icon type="down" /></a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a @click="handleDetail(row)">详情</a>
              </a-menu-item>
              <a-menu-item v-if="row.checkAmount === 0">
                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(row.id)">
                  <a>删除</a>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </template>
      </template>
      <template v-slot:pager>
        <vxe-pager
          :layouts="['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']"
          :current-page.sync="ipagination.currentPage"
          :page-size.sync="ipagination.pageSize"
          :total="ipagination.total"
          @page-change="handlePageChange"
        >
        </vxe-pager>
      </template>
    </vxe-grid>
    <CashListModal ref="modalForm" @ok="modalFormOk" />
  </a-card>
</template>

<script>

import { VxeTableMixin } from '@/mixins/VxeTableMixin'
import CashListModal from './modules/CashListModal'
import { filterDictTextByCache } from '@/components/dict/JDictSelectUtil'
import JDate from '@/components/jeecg/JDate'
export default {
  name: 'CashList',
  mixins: [VxeTableMixin],
  components: {
    CashListModal,
    JDate
  },
  data() {
    return {
      isorter: {
        column: 'cashCode',
        order: 'desc'
      },
      columns: [
        { type: 'checkbox', width: 40 },
        { type: 'seq', width: 40 },
        { title: '收支编码', field: 'cashCode', showOverflow: true, width: 120 },
        { title: '收支属性', field: 'cashType', showOverflow: true, width: 80,
          slots: { default: ({ row }) => {
            return filterDictTextByCache('xy_park_cash_type', row.cashType)
          } }},
        { title: '收支方式', field: 'cashMethod', showOverflow: true, width: 80,
          slots: { default: ({ row }) => {
            return filterDictTextByCache('xy_park_cash_method', row.cashMethod)
          } }},
        { title: '业主信息', field: 'xyParkOwner.ownerName', width: 150 },
        { title: '费项名称', field: 'xyParkCostType.costName', width: 80, showOverflow: true },
        { title: '收支账户', field: 'customerAccount', showOverflow: true, width: 80 },
        { title: '发生金额', field: 'amount', showOverflow: true, width: 120 },
        { title: '已匹配金额', field: 'checkAmount', showOverflow: true, width: 100 },
        { title: '未匹配金额', field: 'c', showOverflow: true, width: 100, slots: { default: ({ row }) => {
          return row.checkAmount ? row.amount - row.checkAmount : row.amount
        } }},
        { title: '手续费', field: 'fee', showOverflow: true, width: 80 },
        { title: '到账/支出金额', field: 'actualAmount', showOverflow: true, width: 80 },
        { title: '缴款日期', field: 'paymentDate', showOverflow: true, width: 120, sortable: true },
        { title: '到账日期', field: 'arrivalDate', showOverflow: true, width: 100 },
        { title: '联系人', field: 'planName', showOverflow: true, width: 80 },
        { title: '对方账号', field: 'accountCode', showOverflow: true, width: 80 },
        { title: '凭证号', field: 'voucherNo', showOverflow: true, width: 80 },
        { title: '收据编号', field: 'receiptNo', showOverflow: true, width: 80 },
        { title: '开票日期', field: 'invoiceDate', showOverflow: true, width: 80 },
        { title: '备注', field: 'remark', showOverflow: true, width: 80 },
        { title: '操作', width: 120, field: 'action', fixed: 'right', slots: { default: 'action' }}
      ],
      url: {
        list: '/community/cash/list',
        delete: '/community/cash/delete',
        deleteBatch: '/community/cash/deleteBatch',
        exportXlsUrl: '/community/cash/export',
        importExcelUrl: 'community/cash/importExcel'
      },
      innerTableWidth: 600
    }
  },
  computed: {
    importExcelUrl: function() {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    }
  },
  methods: {
    handleEdit: function(record) {
      this.$refs.modalForm.disableSubmit = false
      this.$refs.modalForm.edit(record)
    },
    handleAdd: function(type) {
      if (type !== '3') {
        this.$refs.modalForm.disableSubmit = false
        this.$refs.modalForm.add({ cashType: type })
      } else {
        this.$refs.modalForm.disableSubmit = false
        this.$refs.modalForm.add({ cashType: '1', cashMethod: '3' })
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      const columns = this.$refs.vxeTable.getColumnByField('action')
      const tableWidth = this.$refs.vxeTable.$el.clientWidth
      this.innerTableWidth = (tableWidth - columns.width - 30) + 'px'
    })
  }
}
</script>
<style >
.col--center{
  overflow:hidden;
}
</style>
<style scoped>
  @import '~@assets/less/common.less';
</style>
